<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>画廊</title>
    <link rel="icon" type="images/x-icon" href="img/icons/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/personal.css">
    <link rel="stylesheet" href="css/personalPage.css">
</head>
<body>
<!--头部 开始-->
<div class="SY-header pf">
    <div class="clearfix">
        <div class="SY-logo fl usn">
            <a href="#"><img src="img/icons/logo.png" alt="深夜学院"><span class="slogin">深夜研习社</span></a>
        </div>
        <div class="SY-topRight fr">
            <ul class="clearfix">
                <li class="SY-create fr">
                    <a href="javascript:void(0);"><span>创作</span></a>
                </li>
                <li class="SY-userPic fr pr d n">
                    <a href="javascript:void(0);">
                        <img class="br50" src="img/icons/person.png" alt="userPic">
                    </a>
                    <div class="pa tac fold">
                        <span class="pa trigon"></span>
                        <ul>
                            <li class="myPage"><a href="javascript:void(0);">我的研习社</a></li>
                            <li class="myPage"><a href="javascript:void(0);">我的主页</a></li>
                            <li class="wallet"><a href="javascript:void(0);">钱包</a></li>
                            <li class="setting"><a href="javascript:void(0);">设置</a></li>
                            <li class="SY-exit">
                                <a href="javascript:void(0);"><i></i>退出</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="SY-regLog fr dn">
                    <a href="javascript:void(0);">注册</a>
                    <a href="javascript:void(0);">登录</a>
                </li>
                <li class="SY-focus fr">
                    <a href="javascript:void(0);"><i></i><span>关注</span></a>
                </li>
                <li class="SY-piazza fr">
                    <a href="javascript:void(0);"><i></i><span>广场</span></a>
                </li>
                <li class="SY-CG fr">
                    <a href="javascript:void(0);"><i></i><span>学院</span></a>
                </li>
                <li class="SY-index fr active">
                    <a href="javascript:void(0);"><i></i><span>首页</span></a>
                </li>
            </ul>
        </div>
    </div>
    <!--主内容 开始-->
</div>
<!--头部 结束-->
<!--主内容 开始-->
<div class="SY-content">
    <div class="SY-personal pr" style="background-image:url('https://cdnb.artstation.com/p/assets/images/images/000/826/927/large/wl-op-1.jpg?1443929888')">
        <div class="wrap tac pr">
            <div class="S-userDetail">
                <div class="pic br50">
                    <img class="br50" src="https://cdna.artstation.com/p/assets/images/images/005/131/434/smaller_square/gaeri-kim-cat-front.jpg?1488720625">
                </div>
                <div class="detail">
                    <h2 class="nickName feb">路人甲</h2>
                    <p class="description toe">关于此用户的主题内容描述</p>
                    <a class="support db br5" href="javascript:void(0);">支持</a>
                </div>
            </div>
        </div>
        <div class="cover pa"></div>
    </div>
    <div class="SY-navigation gallery mark pr">
        <span class="db pa themeIcon"></span>
        <div class="wrap tac clearfix pr">
            <a class="pushpin pa"></a>
            <div class="S-userDetail pa clearfix dn">
                <div class="pic br50 transition6 fl">
                    <img class="br50" src="https://cdna.artstation.com/p/assets/images/images/005/131/434/smaller_square/gaeri-kim-cat-front.jpg?1488720625">
                </div>
                <div class="detail tal fl">
                    <h2 class="nickName feb">路人甲</h2>
                    <p class="description toe">关于此用户的主题内容描述</p>
                </div>
            </div>
            <ul class="pr dib transition">
                <li class="dib"><a href="javascript:void(0);">动态</a></li>
                <li class="dib active"><a href="javascript:void(0);">画廊</a></li>
                <li class="dib"><a href="javascript:void(0);">文章</a></li>
                <li class="dib"><a href="javascript:void(0);">视频</a></li>
                <li class="dib"><a href="javascript:void(0);">直播</a></li>
                <li class="dib"><a href="javascript:void(0);">留言板</a></li>
            </ul>
            <a class="support br5 fr vh" href="javascript:void(0);">支持</a>
        </div>
    </div>
    <div class="SY-navigation gallery pf dn">
        <span class="db pa themeIcon"></span>
        <div class="wrap tac clearfix pr">
            <a class="pushpin pa"></a>
            <div class="S-userDetail pa clearfix dn">
                <div class="pic br50 transition6 fl">
                    <img class="br50" src="https://cdna.artstation.com/p/assets/images/images/005/131/434/smaller_square/gaeri-kim-cat-front.jpg?1488720625">
                </div>
                <div class="detail tal fl">
                    <h2 class="nickName feb">路人甲</h2>
                    <p class="description toe">关于此用户的主题内容描述</p>
                </div>
            </div>
            <ul class="pr dib transition">
                <li class="dib"><a href="javascript:void(0);">动态</a></li>
                <li class="dib active"><a href="javascript:void(0);">画廊</a></li>
                <li class="dib"><a href="javascript:void(0);">文章</a></li>
                <li class="dib"><a href="javascript:void(0);">视频</a></li>
                <li class="dib"><a href="javascript:void(0);">直播</a></li>
                <li class="dib"><a href="javascript:void(0);">留言板</a></li>
            </ul>
            <a class="support br5 fr" href="javascript:void(0);">支持</a>
        </div>
    </div>
    <div class="SY-mainContent gallery pr clearfix">
        <div class="S-leftBox fl pa">
            <!--主题&标签列表-->
            <div class="S-item">
                <div class="themeBox">
                    <p class="title"><span class="icon"></span>主题</p>
                    <div class="themeList d n">
                        <a class="item db toe active" href="javascript:void(0);">主题一</a>
                        <a class="item db toe" href="javascript:void(0);">主题二</a>
                        <a class="item db toe" href="javascript:void(0);">主题三</a>
                        <a class="item db toe" href="javascript:void(0);">主题四</a>
                    </div>
                </div>
                <div class="tagBox">
                    <p class="title"><span class="icon"></span>标签</p>
                    <div class="tagList d n">
                        <a href="javascript:void(0);" class="item tac dib active"><p class="toe">tag1</p></a>
                        <a href="javascript:void(0);" class="item tac dib"><p class="toe">tag1</p></a>
                        <a href="javascript:void(0);" class="item tac dib"><p class="toe">tag1</p></a>
                        <a href="javascript:void(0);" class="item tac dib"><p class="toe">tag1</p></a>
                        <a href="javascript:void(0);" class="item tac dib"><p class="toe">hahahaha</p></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="S-galleryList clearfix">
            <!--空内容提示-->
            <div class="emptyInfo tac dn">
                <div class="icon"></div>
                <p class="text">分享您的创作，让更多的人关注到你</p>
                <a class="db tac transition br5" href="javascript:void(0);">发一个帖子</a>
            </div>
            <!--加载中-->
            <div class="loading tac dn">
                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/covers/images/009/498/378/smaller_square/daniel-linard-06.jpg?1519325156">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/008/612/220/20171221205343/small_square/sean-tay-drrpat-vwaasv5g.jpg?1513911223">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/008/785/847/smaller_square/alexandre-diboine-baker-shop-smol.jpg?1515320262">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/220/596/20180204155944/smaller_square/helga-sergunina-beautyshot.jpg?1517781585">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/287/856/20180208151626/smaller_square/patrycja-wojcik-koi-mountain.jpg?1518124587">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/324/955/20180211075841/smaller_square/-1x.jpg?1518357521">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/363/563/smaller_square/sergei-sorochkin-study31.jpg?1518554293">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/409/303/20180216154313/smaller_square/neil-kairanna-dragon.jpg?1518817393">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/493/220/smaller_square/oana-roxana-birtea-leaf-dragon-watermark-small.jpg?1519304832">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/542/155/smaller_square/myjerart-fg-finale-5000px.jpg?1519586905">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/521/621/smaller_square/taozi-rong-.jpg?1519459517">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/covers/images/009/438/777/smaller_square/lukas-heninger-img-20180215-224627-029.jpg?1519014077">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/covers/images/009/545/054/smaller_square/harrison-yinfaowei-harrison-yinfaowei-sunset-isle.jpg?1519598754">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/531/105/smaller_square/lynn-chen-mermaidisanunfortunateevent-corgiw2.jpg?1519518826">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/543/727/20180225150804/smaller_square/lynn-chen-piggy-fin.jpg?1519592884">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/537/662/20180225085650/smaller_square/dongbiao-lu-tutorial-class-demo-dongbiao.jpg?1519570610">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/547/923/20180225214001/smaller_square/devin-platts-fafnir-leprechaun-promo.jpg?1519616402">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/513/552/20180223114435/smaller_square/fernando-peque-life01.jpg?1519407875">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/527/914/20180224125215/smaller_square/julia-blattman-geckocar.jpg?1519498335">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/498/100/smaller_square/bobby-chiu-scooper-unicorn-2-sm.jpg?1519324259">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/550/853/20180226020229/smaller_square/adnan-ali-foreveralone.jpg?1519632149">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/437/948/20180218205609/smaller_square/nikita-svechnikov-1.jpg?1519008969">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/488/393/20180221220525/smaller_square/victor-yamakado-1.jpg?1519272325">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/544/853/20180225163401/smaller_square/roger-creus-dorico-pyramids.jpg?1519598041">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/550/519/smaller_square/amiabl-z-received-1293496977463675.jpg?1519629713">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/550/379/smaller_square/marina-t-04-night.jpg?1519628887">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/700/430/smaller_square/ray-84-g.jpg?1520409532">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/677/446/smaller_square/angel-ganev-video-8-low-res.jpg?1520289606">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/008/361/570/20180304180215/smaller_square/shannon-thomas-shannon-thomas-bastion05.jpg?1520208136">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/videos/images/009/689/172/20180306101750/smaller_square/marine-sisnaki-687041275-640.jpg?1520353070">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/009/646/540/smaller_square/lynn-chen-dailysketches-boobybird3.jpg?1520135212">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/700/629/20180307022536/smaller_square/verda-ye-1.jpg?1520411136">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/700/591/20180307022105/smaller_square/guo-moyan-wechatimg1.jpg?1520410866">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/698/803/smaller_square/elisabeth-aarebrot-madsen-fredpus4.jpg?1520397533">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/images/images/008/932/568/smaller_square/quang-huy-nguy-n-color-day-2.jpg?1516170607">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/000/826/927/smaller_square/wl-op-1.jpg?1443929888">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl pay">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdna.artstation.com/p/assets/covers/images/006/449/364/smaller_square/maggy-lisakowski-delta-ava3.jpg?1498671386">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="item fl">
                <a href="javascript:void(0);">
                    <div class="pr">
                        <img src="https://cdnb.artstation.com/p/assets/images/images/009/236/209/smaller_square/yasser-kasir-loving-vincent.jpg?1517858774">
                        <div class="morePic tac pa">
                            <i class="fa fa-picture-o"></i>
                            <span class="num">(10)</span>
                        </div>
                        <div class="cover pa"></div>
                        <div class="lockCover tac pa transition">
                            <p class="icon"><i class="fa fa-lock"></i></p>
                            <object><a class="db tac transition br5" href="javascript:void(0);">订阅观看</a></object>
                        </div>
                        <div class="workMsg pa">
                            <p class="workName toe">作品名称</p>
                            <p class="share tar">
                                <span class="like"><i class="fa fa-heart active"></i>12</span>
                                <span class="share"><i class="fa fa-share"></i></span>
                            </p>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--主内容 结束-->
<!--页脚 开始-->
<div class="SY-footer">
    <div class="SY-foot clearfix">
        <div class="aboutUs fl">
            <div class="logoBox">
                <img src="img/icons/bottomLogo.png" alt="">
                <p class="dib slogin">深夜研习社</p>
                <span class="line dib"></span>
                <p class="dib text">知识应该受到尊重</p>
            </div>
            <div class="connectUs">
                <p class="text dib">联系我们:<span class="phoneNumer dib">027-62438159</span></p>
                <a href="javascript:void(0);" class="tencent linkIcon"></a>
            </div>
        </div>
        <div class="msgDetail fr clearfix">
            <ul class="iconList fr">
                <li class="pr">
                    <span class="wechat linkIcon"></span>
                    <div class="weChatCode tac pa">
                        <i class="icon-arrow-down pa"></i>
                        <p class="scan">扫描二维码</p>
                        <p class="text">关注微信公众号</p>
                        <img src="img/icons/WeChatCode.jpg" alt="">
                    </div>
                </li>
                <li><a href="javascript:void(0);" class="sina linkIcon"></a></li>
            </ul>
            <dl class="fr">
                <dt><a href="javascript:void(0);">关于我们</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="javascript:void(0);">服务条款</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="javascript:void(0);">版权申明</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="javascript:void(0);">常见问题</a></dt>
            </dl>
            <p class="recordNumber"><a href="javascript:void(0);">Copyright&copy; www.shenyecg.com 2017 | 鄂ICP备16021987号-1</a></p>
        </div>
    </div>
</div>
<!--页脚 结束-->
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        //Cotent
        //导航条滚动事件
        window.onscroll = function () {
            var thisScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            var height1 = $(".SY-personal .pic").offset().top;
            var height2 = $(".SY-navigation .pushpin").offset().top;
            //第一阶段
            if(thisScrollTop > height1 - 50) {
                $(".SY-personal .S-userDetail").css("visibility","hidden");
                $(".SY-navigation .S-userDetail").fadeIn();
                $(".SY-navigation.mark .support").css("visibility","visible");
                $(".SY-navigation ul").css("marginLeft","0");
            }else{
                $(".SY-personal .S-userDetail").css("visibility","visible");
                $(".SY-navigation .S-userDetail").fadeOut();
                $(".SY-navigation.mark .support").css("visibility","hidden");
                $(".SY-navigation ul").css("marginLeft","168px");
            }
            //第二阶段
            if(thisScrollTop > height2 - 50) {
                $(".SY-navigation").addClass("touched");
            }else{
                $(".SY-navigation").removeClass("touched");
            }
            //第三阶段
            if(thisScrollTop > 550) {
                $(".SY-navigation.mark").css("visibility","hidden");
                $(".SY-navigation.pf").css("display","block");
            }else{
                $(".SY-navigation.mark").css("visibility","visible");
                $(".SY-navigation.pf").css("display","none");
            }
        };
        window.onscroll();

        //主题标签显示与隐藏
        $(".SY-navigation.gallery .themeIcon").click(function () {
            if($(this).hasClass("show") == true) {
                $(".SY-navigation.gallery .themeIcon").removeClass("show");
                $(".SY-mainContent.gallery .S-leftBox").css("display","none");
            }else{
                $(".SY-navigation.gallery .themeIcon").addClass("show");
                $(".SY-mainContent.gallery .S-leftBox").css("display","block");
            }
        })

    })
</script>
<script>
    window._bd_share_config = {
        common : {
            bdText : '自定义分享内容',
            bdDesc : '自定义分享摘要',
            bdUrl : '自定义分享url地址',
            bdPic : '自定义分享图片'
        },
        share : [{
            "bdSize" : 32
        }]
    };
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
</body>
</html>